<template>
	
<!-- 	
  <div class="console">
    <CardList></CardList>

    <el-row :gutter="20">
      <el-col :sm="24" :md="12" :lg="10">
        <ActiveUser />
      </el-col>
      <el-col :sm="24" :md="12" :lg="14">
        <SalesOverview />
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :sm="24" :md="24" :lg="12">
        <NewUser />
      </el-col>
      <el-col :sm="24" :md="12" :lg="6">
        <Dynamic />
      </el-col>
      <el-col :sm="24" :md="12" :lg="6">
        <TodoList />
      </el-col>
    </el-row>

    <AboutProject />
  </div> -->
  
  
  
  
  
  
  <div class="console">

	<el-row :gutter="20">	
	  <el-col :sm="24" :md="12" :lg="10">
	    <ActiveUser />
	  </el-col>
	  <el-col :sm="24" :md="12" :lg="14">
	    <!-- 在这个列内再使用一个 row 来垂直排列 CardList 和 NewUser -->
	    <el-row :gutter="20">
	      <el-col :span="24">
	        <CardList />
	      </el-col>
	      <el-col :span="24">
	        <NewUser />
	      </el-col>
	    </el-row>
	  </el-col>
	</el-row>

	
<!-- 	
    <el-row :gutter="20">
		
     <el-col :sm="24" :md="24" :lg="12">
        <NewUser />
      </el-col>

      <el-col :sm="24" :md="12" :lg="6">
        <Dynamic />
      </el-col>
      <el-col :sm="24" :md="12" :lg="6">
        <TodoList />
      </el-col>
    </el-row>
  
    <AboutProject />
	 -->
	
	
	
  </div> 
  
</template>

<script setup lang="ts">

  import ActiveUser from './widget/ActiveUser.vue'
  import CardList from './widget/CardList.vue'
  import SalesOverview from './widget/SalesOverview.vue'
  import NewUser from './widget/NewUser.vue'
  import Dynamic from './widget/Dynamic.vue'
  import TodoList from './widget/TodoList.vue'
  import AboutProject from './widget/AboutProject.vue'
  import { useCommon } from '@/composables/useCommon'


  defineOptions({ name: 'Console' })

  useCommon().scrollToTop()
  
  

  
</script>

<style lang="scss" scoped>
  @use './style';
</style>
